.card_border{
    width: 300px;
    height: 200px;
    font-family: 'Courier New', Courier, monospace;
    color: #333;
    font-style: italic;
    line-height: 1.8;
    border-radius: 10px;
    background: repeating-linear-gradient(
    -45deg,
    #e8544d 0px 10px,
    #fff 10px 20px,
    #75adf8 20px 30px,
    #fff 30px 40px

    )-20px -20px/200% 200%;
    padding: 5px;
}
.container{
    padding: 10px;
    background: #fff;
    width: 100%;
    height: 100%;
}
.card_border:hover{
    background-position: 0 0;
}
.card_s{
    width: 190px;
    height: 254px;
    background: rgb(103, 225, 255);
    transition: all 0.4s;
    margin: 16px;
    font-size: 22px;
    text-align: center;
    line-height: 254px;
}
.card_s:hover{
    cursor: pointer;
    transform: scale(1.2);
    background: rgb(103, 151, 255);
   
}
.first-content{
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    opacity: 1;
}
.card_s:hover .first-content{
    height: 0px;
    opacity: 0;
}
.second-content{
    height: 0%;
    width: 100%;
    opacity: 0;
    transition: all 0.4s;
    font-size: 0px;
    transform: rotate(90deg) scale(-1);
}
.card_s:hover .second-content{
    opacity: 1;
    height: 100%;
    font-size: 1.8rem;
    transform: rotate(0deg);
}
.card_hover{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    transition: grid-template-columns .3s;
    width: 800px;
    height: 400px;
}
.card_hover .left,.center,.right{
    width: 100%;
    height: 100%;
   
}
.card_hover:has(.left:hover){
    grid-template-columns: 2fr .5fr .5fr;
}
.card_hover:has(.center:hover){
grid-template-columns: .5fr 2fr .5fr;
}
.card_hover:has(.right:hover){
grid-template-columns: .5fr .5fr 2fr;
}
.img{
    width: 100%;
    height: 100%;
}
.card_filter{
    
    /* border: 1px solid red; */
}
.card_filter img{
    width: 300px;
    filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
}